<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-07-08 08:41:40
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-07-17 16:05:56
 * @FilePath: /things-admin/src/view/device/Edit/brainwave/AddBrain.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="extra" style="color: #999; font-size: 12px">
        <label style="color: #ff3b30">*</label> 为必填
      </p>
      <Form
        ref="formValidate"
        :model="brain"
        :rules="ruleValidate"
        :label-width="100"
      >
        <FormItem label="版本号：" prop="versionName" required>
          <Input
            v-model="brain.versionName"
            style="width: 400px"
            placeholder="请注意输入格式:如(0.0.1)"
          />
        </FormItem>
        <FormItem label="版本编码：" prop="versionCode" required>
          <Input v-model="brain.versionCode" style="width: 400px" />
        </FormItem>
        <!-- <FormItem label="更新类型：" prop="upgradeType" required>
          <RadioGroup v-model="brain.upgradeType">
            <Radio label="APP">安卓APP</Radio>
            <Radio label="PAD">IPAD</Radio>
            <Radio label="IOS">苹果APP</Radio>
            <Radio label="S0601">S0601</Radio>
          </RadioGroup>
        </FormItem> -->
        <!-- apkMd5默认传空 不给显示 -->
        <!-- <FormItem label="apkMd5：" prop="apkMd5">
          <Input disabled v-model="brain.apkMd5" style="width: 400px" />
        </FormItem> -->
        <FormItem label="更改状态：" prop="updateStatus" required>
          <RadioGroup v-model="brain.updateStatus">
            <Radio label="1">不强制更新</Radio>
            <Radio label="2">强制更新</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="Hex文件：" prop="downloadUrl" required>
          <Upload
            :show-upload-list="false"
            :action="uploadAction"
            :max-size="512000"
            :format="['apk']"
            :headers="uploadHeaders"
            :on-format-error="handleFormatError1"
            :on-exceeded-size="handleMaxSize1"
            :on-progress="handleProgress"
            :on-success="handleSuccessFile"
            :on-error="handleError"
          >
            <Button icon="ios-filing">选择附件</Button>
          </Upload>
          <a :href="brain.url">{{ brain.extName }}</a>
          <p style="margin-left: 15px">支持 apk 格式</p>
          <!-- <p style="margin-left: 15px">正在上传请等待...</p> -->
        </FormItem>
        <FormItem label="更改内容：" prop="modifyContent" required>
          <Input
            style="width: 400px"
            type="textarea"
            v-model="brain.modifyContent"
            :rows="5"
            maxlength="50"
            show-word-limit
          ></Input>
        </FormItem>
        <FormItem label="设备型号：">
          <Input
            style="width: 400px"
            v-model="brain.xinghao"
            disabled
            maxlength="50"
          ></Input>
        </FormItem>
      </Form>

      <div style="margin: 20px 0px 35px 25px">
        <Button @click="goBack" style="width: 100px; height: 40px">返回</Button>
        <Button
          style="margin-left: 30px; width: 100px; height: 40px"
          @click="handleSubmit('formValidate')"
          type="primary"
          >保存
        </Button>
      </div>
    </Card>
  </div>
</template>
<script>
import { Component, Prop, Vue } from "vue-property-decorator";
import { ApkBloc } from "@/view/apk/ApkBloc";
import { store } from "@/store/Store";
import { baseUrl } from "@/base/Request";
import { Loading } from "@/base/Loading";
import { router } from "@/config/Router";
import HtmlEditor from "@/component/HtmlEditor.vue";


export default {
  components: { HtmlEditor },
  data() {
    // 自定义规则
    const validateVersions = (rule, value, callback) => {
      if (value === undefined) {
        callback(new Error("版本号不能为空"));
      } else {
        let reg2 = /^(\d+)\.(\d+)\.(\d+)$/;
        if (!reg2.test(value)) {
          callback(new Error("请输入正确的版本号如:0.0.1"));
        }
        callback();
      }
    };
    return {
      brain: {
        versionName: "",
        versionCode: "",
        upgradeType: "",
        apkMd5: "",
        updateStatus: "1", //注意调用接口的时候 可能需要转化数值类型
        extName: "",
        url: "",
        modifyContent: "",
        xinghao: "A552VR",
        downloadUrl: "",
        apkSize: "",

      },
      elProgress: false,
      ruleValidate: {
        modifyContent: [
          { required: true, message: "更改内容不能为空", trigger: "blur" }
        ],
        versionCode: [
          { required: true, message: "版本编码不能为空", trigger: "blur" }
        ],
        versionName: [
          { required: true, validator: validateVersions, trigger: "blur" }
        ],
        upgradeType: [
          { required: true, message: "更新类型不能为空", trigger: "blur" }
        ],
        downloadUrl: [
          { required: true, message: "APK文件不能为空", trigger: "blur" }
        ],
        updateStatus: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ]
      },
      config: {
        imageUrl: `${baseUrl}/api/upload/image`, // 图片上传提交地址
        imagePath: "",
        imageToken: store.state.auth.accessToken,
        imageFieldName: "file"
      },
      initContent: "",
      btnload: new Loading()
    };
  },

  computed: {
    uploadHeaders() {
      return {
        Authorization: "Bearer " + store.state.auth.accessToken
      };
    },
    uploadActionImg() {
      return `${baseUrl}/api/upload/image`;
    },
    uploadAction() {
      return `${baseUrl}/api/upload/apk`;
    }
  },
  methods: {
    handleError() {
      this.elProgress = false;
      this.$Message.error("上传失败");
    },
    // 上传成功的回调
    handleSuccessFile(res, file) {
      this.elProgress = false;
      this.brain.downloadUrl = res.data.url;
      this.brain.apkSize = res.data.size;
      this.brain.extName = res.data.extName;
    },
    handleProgress() {
      this.elProgress = true;
    },
    handleMaxSize1(file) {
      this.$Message.error("文件大小不能超过200M");
    },
    handleFormatError1(file) {
      this.$Message.error("请选择格式为.apk格式的文件");
    },
    goBack() {
      history.go(-1);
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
        }
      });
    },

  }
};
</script>
<style lang="less" scoped>
.top {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  font-size: 18px;
  line-height: 50px;
}

/deep/ .ivu-form-item-content {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
}
</style>
